<template>
	<!-- 
		瀑布流横向实现flex
		备注：容器必须有固定高度且高度大于最高的列高  固定高度可以根据当前渲染内容自行计算
	 -->
	<view class="container">
		<view v-for="(item,index) in urlList" class="item">
			<image class="item" @click="prview(index)" :src="getImageurl(item.imageurl,index)"  mode="aspectFill"></image>
		</view>
		
		<view class="item">
		
		</view>
	</view>
</template>

<script>
	import http from '../../utils/http.js';
	export default {
		data() {
			return {
				urlList:[],
				imageurlList:[]
			}
		},
		methods: {
			prview:function(i){
				console.log("url:",i);
				var that = this;
				uni.previewImage({
					current:i,
					urls:that.imageurlList,
					loop:true,
					indicator:"default"
				})
			},
			update:function(){
				var that = this;
				http.showMyCollections({
					userid:uni.getStorageSync("openid")
				}).then(list=>{
					console.log(list);
					that.urlList = list.data
					console.log("url是",that.urlList)
					uni.setStorageSync("beishoulu",that.urlList.length)
					if(uni.getStorageSync("beishoulu").length==0){
						uni.setStorageSync("beishoulu",0)
					}
					
				})
				
				
			},
			getImageurl:function(url,i){
				var that = this;
				that.imageurlList[i] ="https://www.camwork.site/rescourse/collections/"+url;
				return "https://www.camwork.site/rescourse/collections/"+url;
			}
		}
	}
</script>

<style scoped lang="scss">
		.container {
		width: 750upx;
		margin-top: 50UPX;
		
	}
	
	.item {
	float: left;
	width: 250upx;
	height: 444upx;

	}
	image{
		width: 250upx;
		height: 444upx;
		margin: 0 auto;
	}

</style>